<template>
  <div style="padding-top: 1px; float: right;width: 5%;">
    <el-dropdown @menu-item-click="click">
      <span class="nav-user">
        <img style="border-radius: 10px; height: 40px;width: 40px;" src="../../../assets/img.gif"/>
        <i class="el-icon-caret-bottom"></i>
      </span>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item command="edit">修改密码</el-dropdown-item>
        <el-dropdown-item command="out">退出登录</el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>
  </div>
</template>

<script>
  import {mapState} from 'vuex'

  export default {
    name: 'index',
    data () {
      return {
        userImg: '../../../assets/logo.png'
      }
    },
    computed: mapState({
      userInfo: state => state.user.userInfo
    }),
    methods: {
      click (type) {

        if (type === 'out') {
          this.$confirm('', '您确定要退出吗?', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
            center: true
          }).then(() => {
            this.$store.commit('ACCOUNT_LOGOUT_FAILURE')
            window.location.reload()
          }).catch(() => {
            console.log('退出错误')
          })
        } else {
          this.$emit('openEditorPwd')
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .nav-user {
    cursor: pointer;
  }
</style>
